<script setup lang="ts">
import type { Address } from '../../typings'
import { defineEmits } from 'vue'
import { ref, computed } from 'vue'
import { showConfirmDialog } from 'vant';
import 'vant/es/dialog/style'
const { list, currentId } = defineProps<{
    list: Address,
    currentId: number
}>()

const emit = defineEmits(['setDefault', 'setCurrentDefault', 'setAddress', 'delAddress'])

const defaultVal = computed(() => {
    return list.default
})




const changeDefault = (id: number) => {
    emit('setDefault', id)
}

const changeCurrentDefault = () => {
    emit('setCurrentDefault', list)
}
const changeCard = () => {
    emit('setAddress', list)

}

const delCard = () => {
    showConfirmDialog({
        title: '删除',
        message:
            '是否删除该地址信息',
     })
        .then(() => {
            emit('delAddress', list.id)
        })

}

</script>

<template>
    <div class="address-com p-2 mt-3 bg-white border-2 border-gray-200"
        :class="currentId == list.id ? 'border-red-500' : ''">

        <div class="personal-information" @click="changeCurrentDefault">
            <div>
                <span>{{ list.addressee }}</span> <span class="ml-3">{{ list.telVal }}</span>
            </div>
            <p>{{ list.fieldValue }}{{ list.detailedAddress }}</p>
        </div>

        <div class="icon flex justify-between items-center mt-2">
            <div class="default">
                <input class=" w-4 h-4" type="checkbox" v-model="defaultVal" @change="changeDefault(list.id)"> 设为默认
            </div>
            <div class="set-icon">
                <span @click="changeCard" class="mr-2"> <i class="ml-1"><van-icon color="#f35779" name="setting-o" /></i>
                    编辑</span>
                <span @click="delCard"> <i class="ml-1"><van-icon color="#f35779" name="delete-o" /></i> 删除</span>
            </div>
        </div>
    </div>
</template>